<template>
  <div class="current-data-wrapper">
    <div class="current-data-screen">
      <div class="left-top">
        <moduleData></moduleData>
      </div>
      <div class="right-top">
        <modlueYellow></modlueYellow>
      </div>
      <div class="left-bottom">
        <modlueGreen></modlueGreen>
      </div>
      <div class="right-bottom">
        <modlueBlack></modlueBlack>
      </div>
    </div>
  </div>
</template>

<!--当前传感器数据模块-->
<script>
import moduleData from '../../../components/modlue-data'
import modlueYellow from '../../../components/modlue-data-yellow'
import modlueGreen from '../../../components/modlue-data-green'
import modlueBlack from '../../../components/modlue-data-black'

export default {
  name: "current-data",
  components:{
    moduleData,
    modlueYellow,
    modlueGreen,
    modlueBlack
  }
}
</script>

<style scoped lang="less">
  .current-data-wrapper{
    height: 40vh;
    width: 100vw;
    border-bottom: 3px solid #4865f8;
    border-top: 3px solid #4865f8;
    border-radius: 20px;
  }
  .current-data-screen{
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row wrap;
  }
  .left-top{
    width: 50%;
    height: 50%;
    box-sizing: border-box;
    border-bottom: 1px solid blue;
    border-right: .5px solid blue;
    border-bottom-right-radius:20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .left-bottom{
    width: 50%;
    height: 50%;
    box-sizing: border-box;
    //border-bottom: 1px solid blue;
    border-right: .5px solid blue;
    border-top-right-radius:20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .right-top{
    width: 50%;
    height: 50%;
    box-sizing: border-box;
    border-bottom: 1px solid blue;
    border-left: .5px solid blue;
    border-bottom-left-radius:20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .right-bottom{
    width: 50%;
    height: 50%;
    box-sizing: border-box;
    //border-bottom: 1px solid blue;
    border-left: .5px solid blue;
    border-top-left-radius:20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

